﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Client.aspx.cs" Inherits="Client" %>

<!DOCTYPE html> 
<html>
<head>

    <title>Client Page</title>
    <script type ="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<style type="text/css">body {background-color: black;width: 780px;height: 560px;}</style>

<%--    <script type = "text/javascript">

        function load() {
            Timer();
        }

        function Timer() {
            // TODO : Update map and chat
            var t = setTimeout("Timer()", 10000);
            alert("TICK");
        }

    </script>--%>

</head>
<body id="map" onload="startAjax()" >
    <form id="Form1" runat="server">
    <asp:TextBox ID="hiddenPosText"  value="213;456" runat="server"></asp:TextBox>
        </form>

    <script type = "text/javascript">
        var map;
        var truckID;
        var image = 'images/livraison.gif';
        var myLatLng;
        var markersArray = [];

        function initialize() {
            truckID = getParameterByName("asktrucklonlat");
            var latlon = document.getElementById("hiddenPosText").value;
            var lon = latlon.split(";")[0];
            var lat = latlon.split(";")[1];

            var mapOptions = {
                zoom: 16,
                center: new google.maps.LatLng(lat, lon),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map'),
            mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

        function startAjax() {
            Timer();
        }

        function clearMarkers() {
            setAllMap(null);
        }

        function Timer() {
            GetCoordinates();
            var t = setTimeout("Timer()", 5000);
        }

        function GetCoordinates() {
            var req = submitForm();
            req.open("POST", "Client.aspx?ajaxtruckid=" + truckID, true);
            /* poor way to test truckID value */
            if (truckID > -1 && truckID < 10) {
                req.send(true);
            }

            function addMarker() {
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image
                });
                markersArray.push(marker);
            }

            function removeMarker() {
                if (markersArray) {
                    for (i = 0; i < markersArray.length; i++) {
                        markersArray[i].setMap(null);
                    }
                    markersArray.length = 0;
                }
            }

            function submitForm() {
                var req;
                // Prepare for usual Ajax presetting
                try {
                    req = new ActiveXObject('Msxml2.XMLHTTP');
                    //alert(req);
                }
                catch (e) {
                    try {
                        req = new ActiveXObject('Microsoft.XMLHTTP');
                        //alert(req);
                    }
                    catch (e2) {
                        try {
                            req = new XMLHttpRequest();
                        }
                        catch (e3) {
                            req = false;
                            //alert(req);
                        }
                    }
                }
                req.onreadystatechange = function () {
                    if (req.readyState == 4) {
                        if (req.status == 200) {
                            // Have receive server response
                            // Fetch it and display it on map.
                            var longitude = req.responseText.split(";")[0];
                            var latitude = req.responseText.split(";")[1];
                            myLatLng = new google.maps.LatLng(latitude, longitude);
                            removeMarker();
                            addMarker();
                            var bounds = new google.maps.LatLngBounds();
                            bounds.extend(myLatLng);
                            map.setCenter(bounds.getCenter());
                        }
                    }
                }
                return req;
            }
        }
            function getParameterByName(name) {
                name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
                var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                    results = regex.exec(location.search);
                return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
            }
        
    </script>
</body>
</html>
